<template>
  <div>
    <Row class="leftMenu" >
      <Col span="24">
      <Menu :theme="theme" :accordion="true" :active-name="activeName" :open-names="openName" @on-select="getActive"
            ref="leftMenus" style="width: 100%;">
        <Submenu v-for="i in leftData" :name="i.name" :key="i">
          <template slot="title">
            <Icon :type="i.icon"></Icon>
            {{i.title}}
          </template>
          <router-link v-for="i in i.children" :to="i.url" :key="i">
            <MenuItem :name="i.name">{{i.subTitle}}</MenuItem>
          </router-link>
        </Submenu>
      </Menu>
      </Col>
    </Row>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        theme: 'primary',
        activeName:'1-1',
        openName:["1"],
        leftData:[
          {
            name:1,
            icon:'icecream',
            title:'洗衣设备管理',
            children:[
              {name: '1-1', subTitle: '洗衣详情', url: '/washlist'}
              ]
          },
          {
            name:2,
            icon:'speakerphone',
            title:'洗衣模式管理',
            children:[
              {name: '2-1', subTitle: '价格详情', url: '/priceList'}
            ]
          }

        ]
      }
    },
    mounted:function () {

      this.activeName=localStorage.getItem('activeName');
      this.openName=JSON.stringify(localStorage.getItem('openName'));
      this.$nextTick(function () {
        this.$refs.leftMenus.updateOpened();
        this.$refs.leftMenus.updateActiveName();
      });
    },
    methods:{
      getActive(name){
        let arr=name.toString().split('-');

        localStorage.setItem('activeName',name);
        localStorage.setItem('openName',arr[0]);
      }
    }
  }
</script>
<style >
  a {
    color: #4a4b4c;
    background: 0 0;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease;
  }

  .ivu-menu-vertical {
    width: 100%;
    height: 800px;
    background-color: #0ec7ff;
  }
  .ivu-menu-vertical .ivu-menu-item, .ivu-menu-vertical .ivu-menu-submenu-title {
    padding: 14px 24px;
    position: relative;
    cursor: pointer;
    color: #fff;
    z-index: 1;
    transition: all .2s ease-in-out;
  }

  .ivu-menu .ivu-menu-submenu-title:hover {
    background-color: #09e7ff;
    color: #555
  }
  .ivu-menu .ivu-menu-item:hover {
    background-color: #09e7ff;
    color: #222;
  }
  .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
    color: #000;
    border-right: 2px solid #2d8cf0;
    z-index: 2;
  }
</style>
